function Screen(canvas, isWelcomeScreen) {
	var timer;
	var width = canvas.width;
	var height = canvas.height;
	var context = canvas.getContext("2d");
	var bullet;
	if (isWelcomeScreen) {
		bullet = new AnimatedSprite({
			image: _images.object,
			frameWidth: 57,
			frameHeight: 57,
			interval: 70,
			left: canvas.width / 2 - 10,
			top: 80,
			width: 52,
			height: 39
		});
		bullet.addSprite({
			name: "run_right",
			startFrame: 96,
			framesCount: 6,
			marginTop: 0,
			marginBottom: 0,
			marginLeft: 0,
			marginRight: 0
		});

	}
	this.items = [];
	// this method/event is actived in the end of draw() method
	this.afterDraw = null;
	this.beforeDraw = null;

	this.update = function() {
		if (bullet) {
			bullet.left = bullet.top += 0;
			bullet.update();
		}

		for (var i = 0; i < this.items.length; i++) {
			this.items[i].update();
		}
        
        onCanvasClick(canvas, this);
	};
	this.draw = function() {
		//context.clear();
		context.fillStyle = "rgba(255, 0, 255, 0.1)";
		context.fillRect(0, 0, width, height);

		if (this.beforeDraw)
			this.beforeDraw(context);

		if (bullet)
			bullet.draw(context);

		// draw items
		for (var i = 0; i < this.items.length; i++) {
			this.items[i].draw(context);
		}
		
		if (this.afterDraw)
			this.afterDraw(context);
	};
	this.start = function() {
		this.stop();
		var self = this;
        
        onCanvasClick(canvas, self);
		
		canvas.onmousemove = function(e) {
			// change the isMouseOver property of each MenuItem
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;
			canvas.style.cursor = 'default';
			// console.log(x + " " +y);
			//context.drawImage(_images.cursor,0,0, 41, 55, x,y,41, 55);

			for (var i = 0; i < self.items.length; i++) {
				self.items[i].isMouseOver = self.items[i].contain(x, y);
				// change the cursor type to hand
				if (self.items[i].isMouseOver)
					canvas.style.cursor = 'pointer';
			}
		};
		timer = setInterval(function() {
			self.update();
			self.draw();
		}, 1000 / FPS);
	};
	this.stop = function() {

		if (timer)
			clearInterval(timer);
		timer = null;
		canvas.style.cursor = 'default';
		canvas.onmousemove = null;
		canvas.onclick = null;
	};
	this.addItem = function(item) {
		this.items.push(item);
	};
}

function onCanvasClick(canvas, self) {
    // register events
		canvas.onclick = function(e) {

			// raise the onclick event of each MenuItem when it is clicked
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;

			for (var i = 0; i < self.items.length; i++) {
				if (self.items[i].onclick && self.items[i].contain(x, y))
					self.items[i].onclick(x, y);
			}
		};
}